<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令案例_2</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    自定义指令实现在输入框中输入一个数字，对应能获取到显示的数字的10倍。

-->
<div id="app">
    <input type="number" v-fmodel="num">
    <h1>输入值的10倍的值为:{{num * 10}}</h1>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 0,
        },
        directives: {
            fmodel: {
                bind(el, binding) {
                    el.value = binding.value;
                    el.oninput = function() {
                        binding.value = parseFloat(el.value) || 0;
                        document.querySelector('h1').textContent = '输入值的10倍:' + (binding.value * 10);
                    }
                },
                inserted(el) {
                    el.focus();
                },
                update(el, binding) {
                    el.value = binding.value;
                }

            }
        }
    })
</script>
</html>